<template>
    <div>
        <!-- <Cards>
</Cards> -->
    </div>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="first">
            <el-card style="max-width: 1000px">
                <div v-for="item in UserData" :key="o" class="text1 ">
                    <p>
                    <h3> {{ item.p0 }}</h3>
                    </p>
                    <p class="p2">
                        <span>{{ item.p1 }}</span>
                        <span>{{ item.p1 }}</span>
                        <span>{{ item.p1 }}</span>
                    </p>
                    <!-- <p>
                        <span>{{ item.p2 }}</span>
                    </p> -->
                    <p class="p1">
                        <el-button type="primary">大方</el-button>
                        <el-button type="">删除</el-button>
                    </p>
                </div>

            </el-card>
        </el-tab-pane>
        <el-tab-pane label="Config" name="second"> 
              <div v-for="item in UData" :key="o" class="text1 ">
                    <p>
                    <h3> {{ item.p0 }}</h3>
                    </p>
                    <p class="p2">
                        <span>{{ item.p1 }}</span>
                        <span>{{ item.p1 }}</span>
                        <span>{{ item.p1 }}</span>
                    </p>
                    <!-- <p>
                        <span>{{ item.p2 }}</span>
                    </p> -->
                    <p class="p1">
                        <el-button type="primary">大方</el-button>
                        <el-button type="">删除</el-button>
                          <el-switch v-model="value1" />
                    </p>
                </div>
</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
</template>

<script setup>
// import Cards from '@/components/card.vue'
import { ref } from 'vue'
const value1 = ref(true)
const UserData = [
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
]
const UData = [
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
    { p0: '视频类-历史导入', p1: '法国恢复:120', p2: '​可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的样式。' },
]
</script>

<style lang="scss" scoped>
.text1 {
    width: 230px;
    height: 160px;
    color: #6b778c;
    font-weight: 600;
    float: left;
    border: solid;
    padding: 0 10px;
    margin: 10px;

}

.p1 {
    float: right;
    position: relative;
    top: -30px;
}

.p2 span {
    position: relative;
    top: -20px;

}.p2 span:nth-child(1) {
margin-right: 20px;
}
</style>